<template>
  <div class="file">
    <div v-show="showDocFile">
       <!-- 合同预览 -->
       <h3>合同预览</h3>
      <!-- <div ref="file"></div> -->
      <div class="btns-box">
        <el-button type="primary" @click="editContract" v-show="this.role==='admin'?true:false">修改合同</el-button>
        <el-button type="success">打印合同</el-button>
        <el-button type="info" @click="goBack">返回</el-button>
      </div>
    </div>
      <EditContract v-show="showEditCon" @child-event="getChild()"></EditContract>
  </div>
</template>
<script>
// let docx = require('docx-preview');
import EditContract from './EditContract.vue';
export default {
  components:{
    EditContract
  },
  // 接受来自父组件的值
  props: {
    fileData:{
      type:String,
      default: ''
    },
    role: {
      type:String,
      default: ''
    }
  },
  data(){
    return {
      showEditCon:false,
      showDocFile: true,
    }
  },
  mounted(){
    this.showDoc(this.fileData); 
  },
  methods: {
    showDoc(res){
      // docx.renderAsync(res,this.$refs.file) // 获取到biob文件流，进行渲染到页面预览
    },
    editContract(){
      this.showEditCon = true;
      this.showDocFile = false;
    },
    // 获取子组件传来的值
    getChild(data){
      console.log(data);
      this.showEditCon= data;
      this.showDocFile = true;
      // 重新请求文档流
    },
    goBack(){
      this.$emit('get-contract',false)
    }
  }
}
</script>
<style lang="scss" scoped>
.file {
  background-color: #fff;
  padding: 20px 10px;
  .btns-box {
    display: flex;
    justify-content: center;
  }
}
</style>